<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本模型演示</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Roboto:wght@300;400;700&family=Source+Code+Pro&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3a0ca3;
            --accent: #f72585;
            --light: #f8f9fa;
            --dark: #212529;
            --success: #4cc9f0;
            --warning: #f9c74f;
            --danger: #f94144;
            --gray: #6c757d;
            --border-radius: 8px;
            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            line-height: 1.6;
            color: var(--dark);
            background-color: #f5f7fa;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 30px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }
        
        h1 {
            margin-bottom: 10px;
            font-size: 2.5rem;
        }
        
        .description {
            margin-bottom: 30px;
            background: white;
            padding: 25px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }
        
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        @media (max-width: 900px) {
            .container {
                grid-template-columns: 1fr;
            }
        }
        
        .controls {
            background: white;
            padding: 25px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }
        
        .preview {
            background: white;
            padding: 25px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            display: flex;
            flex-direction: column;
        }
        
        .preview-content {
            flex: 1;
            padding: 30px;
            border: 1px dashed var(--gray);
            border-radius: var(--border-radius);
            margin-bottom: 20px;
            transition: var(--transition);
            background: linear-gradient(45deg, #f8f9fa 25%, transparent 25%, transparent 75%, #f8f9fa 75%, #f8f9fa),
                        linear-gradient(45deg, #f8f9fa 25%, transparent 25%, transparent 75%, #f8f9fa 75%, #f8f9fa);
            background-size: 20px 20px;
            background-position: 0 0, 10px 10px;
        }
        
        .text-example {
            font-size: 18px;
            line-height: 1.6;
            transition: var(--transition);
            background: white;
            padding: 20px;
            border-radius: var(--border-radius);
        }
        
        .control-group {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .control-group h3 {
            margin-bottom: 15px;
            color: var(--secondary);
            display: flex;
            align-items: center;
        }
        
        .control-group h3 i {
            margin-right: 10px;
            color: var(--primary);
        }
        
        .slider-container {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .slider-container label {
            width: 120px;
            font-weight: 500;
            color: var(--dark);
        }
        
        .slider-container input[type="range"] {
            flex: 1;
            margin: 0 15px;
            height: 5px;
            background: #ddd;
            outline: none;
            border-radius: 5px;
            transition: var(--transition);
        }
        
        .slider-container input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            background: var(--primary);
            border-radius: 50%;
            cursor: pointer;
        }
        
        .slider-container span {
            width: 60px;
            text-align: right;
            font-family: 'Source Code Pro', monospace;
            background: #f1f3f5;
            padding: 3px 8px;
            border-radius: 4px;
        }
        
        .select-container {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .select-container label {
            width: 120px;
            font-weight: 500;
            color: var(--dark);
        }
        
        .select-container select {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            background: white;
            font-family: 'Noto Sans SC', sans-serif;
        }
        
        .color-container {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .color-container label {
            width: 120px;
            font-weight: 500;
            color: var(--dark);
        }
        
        .color-container input {
            width: 60px;
            height: 35px;
            margin-right: 15px;
        }
        
        .color-container span {
            font-family: 'Source Code Pro', monospace;
            background: #f1f3f5;
            padding: 3px 8px;
            border-radius: 4px;
        }
        
        .toggle-container {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .toggle-container label {
            width: 120px;
            font-weight: 500;
            color: var(--dark);
        }
        
        .toggle-container input[type="checkbox"] {
            width: 50px;
            height: 24px;
            -webkit-appearance: none;
            background: #ced4da;
            border-radius: 12px;
            position: relative;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .toggle-container input[type="checkbox"]:checked {
            background: var(--success);
        }
        
        .toggle-container input[type="checkbox"]::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: var(--transition);
        }
        
        .toggle-container input[type="checkbox"]:checked::before {
            left: calc(100% - 22px);
        }
        
        .code-container {
            background: #2d3a4b;
            color: #e2e8f0;
            padding: 25px;
            border-radius: var(--border-radius);
            font-family: 'Source Code Pro', monospace;
            overflow-x: auto;
            margin-bottom: 30px;
            box-shadow: var(--box-shadow);
        }
        
        .code-container pre {
            margin: 0;
            white-space: pre-wrap;
        }
        
        .property {
            color: #7fdbca;
        }
        
        .value {
            color: #ffd700;
        }
        
        .selector {
            color: #ff7b72;
        }
        
        .comment {
            color: #5e87a3;
        }
        
        .presets {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .preset-card {
            background: white;
            padding: 20px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .preset-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        .preset-card h3 {
            color: var(--secondary);
            margin-bottom: 15px;
            border-bottom: 2px solid var(--primary);
            padding-bottom: 10px;
        }
        
        .preset-content {
            font-size: 16px;
            line-height: 1.5;
        }
        
        .preset-1 {
            font-family: 'Georgia', serif;
            font-style: italic;
            color: #5a189a;
            letter-spacing: 1px;
        }
        
        .preset-2 {
            font-family: 'Courier New', monospace;
            font-weight: bold;
            background: #ff9e00;
            color: white;
            padding: 10px;
        }
        
        .preset-3 {
            font-family: 'Arial', sans-serif;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }
        
        .preset-4 {
            font-family: 'Trebuchet MS', sans-serif;
            line-height: 2;
            text-align: justify;
            color: #e63946;
        }
        
        footer {
            text-align: center;
            padding: 20px;
            color: var(--gray);
            font-size: 0.9rem;
        }
        
        .highlight {
            background: linear-gradient(120deg, #f9c74f 0%, #f9c74f 100%);
            background-repeat: no-repeat;
            background-size: 100% 40%;
            background-position: 0 90%;
        }
    </style>
</head>
<body>
    <header>
        <h1>CSS文本模型演示</h1>
        <p>探索CSS文本属性的强大功能</p>
    </header>
    
    <div class="description">
        <p>CSS提供了丰富的文本样式属性，可以控制文本的外观、布局和效果。通过这个演示，您可以实时查看不同属性如何影响文本的显示效果。</p>
    </div>
    
    <div class="container">
        <div class="controls">
            <h2>文本控制面板</h2>
            
            <div class="control-group">
                <h3><i>📝</i> 字体属性</h3>
                
                <div class="select-container">
                    <label for="fontFamily">字体族:</label>
                    <select id="fontFamily">
                        <option value="'Noto Sans SC', sans-serif">Noto Sans SC (默认)</option>
                        <option value="'Georgia', serif">Georgia</option>
                        <option value="'Arial', sans-serif">Arial</option>
                        <option value="'Courier New', monospace">Courier New</option>
                        <option value="'Trebuchet MS', sans-serif">Trebuchet MS</option>
                        <option value="'Times New Roman', serif">Times New Roman</option>
                    </select>
                </div>
                
                <div class="slider-container">
                    <label for="fontSize">字体大小:</label>
                    <input type="range" id="fontSize" min="12" max="40" value="18">
                    <span id="fontSize-value">18px</span>
                </div>
                
                <div class="slider-container">
                    <label for="fontWeight">字体粗细:</label>
                    <input type="range" id="fontWeight" min="100" max="900" step="100" value="400">
                    <span id="fontWeight-value">400</span>
                </div>
                
                <div class="toggle-container">
                    <label for="fontStyle">斜体:</label>
                    <input type="checkbox" id="fontStyle">
                </div>
            </div>
            
            <div class="control-group">
                <h3><i>↔️</i> 间距属性</h3>
                
                <div class="slider-container">
                    <label for="lineHeight">行高:</label>
                    <input type="range" id="lineHeight" min="1" max="3" step="0.1" value="1.6">
                    <span id="lineHeight-value">1.6</span>
                </div>
                
                <div class="slider-container">
                    <label for="letterSpacing">字母间距:</label>
                    <input type="range" id="letterSpacing" min="-2" max="10" value="0">
                    <span id="letterSpacing-value">0px</span>
                </div>
                
                <div class="slider-container">
                    <label for="wordSpacing">单词间距:</label>
                    <input type="range" id="wordSpacing" min="-5" max="20" value="0">
                    <span id="wordSpacing-value">0px</span>
                </div>
            </div>
            
            <div class="control-group">
                <h3><i>🎨</i> 颜色与装饰</h3>
                
                <div class="color-container">
                    <label for="color">文本颜色:</label>
                    <input type="color" id="color" value="#212529">
                    <span id="color-value">#212529</span>
                </div>
                
                <div class="select-container">
                    <label for="textAlign">文本对齐:</label>
                    <select id="textAlign">
                        <option value="left">左对齐</option>
                        <option value="center">居中</option>
                        <option value="right">右对齐</option>
                        <option value="justify">两端对齐</option>
                    </select>
                </div>
                
                <div class="select-container">
                    <label for="textTransform">文本转换:</label>
                    <select id="textTransform">
                        <option value="none">无</option>
                        <option value="uppercase">全部大写</option>
                        <option value="lowercase">全部小写</option>
                        <option value="capitalize">首字母大写</option>
                    </select>
                </div>
                
                <div class="select-container">
                    <label for="textDecoration">文本装饰:</label>
                    <select id="textDecoration">
                        <option value="none">无</option>
                        <option value="underline">下划线</option>
                        <option value="overline">上划线</option>
                        <option value="line-through">删除线</option>
                    </select>
                </div>
            </div>
        </div>
        
        <div class="preview">
            <h2>实时预览</h2>
            <div class="preview-content">
                <div id="textExample" class="text-example">
                    <h3>Meta Wing Text Style Demo</h3>
                    <p>这是一个展示CSS文本属性的示例段落。通过左侧的控制面板，您可以调整各种文本属性并实时查看效果。</p>
                    <p>CSS提供了丰富的文本控制功能，包括字体选择、大小调整、粗细控制、行高设置以及各种间距和装饰效果。</p>
                    <p>使用这些属性，您可以创建出美观且具有良好可读性的文本内容。</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="code-container">
        <pre><code><span class="comment">/* 生成的CSS代码 */</span>
<span class="selector">#textExample</span> {
    <span class="property">font-family</span>: <span class="value" id="code-fontFamily">'Noto Sans SC', sans-serif</span>;
    <span class="property">font-size</span>: <span class="value" id="code-fontSize">18px</span>;
    <span class="property">font-weight</span>: <span class="value" id="code-fontWeight">400</span>;
    <span class="property">font-style</span>: <span class="value" id="code-fontStyle">normal</span>;
    <span class="property">line-height</span>: <span class="value" id="code-lineHeight">1.6</span>;
    <span class="property">letter-spacing</span>: <span class="value" id="code-letterSpacing">0px</span>;
    <span class="property">word-spacing</span>: <span class="value" id="code-wordSpacing">0px</span>;
    <span class="property">color</span>: <span class="value" id="code-color">#212529</span>;
    <span class="property">text-align</span>: <span class="value" id="code-textAlign">left</span>;
    <span class="property">text-transform</span>: <span class="value" id="code-textTransform">none</span>;
    <span class="property">text-decoration</span>: <span class="value" id="code-textDecoration">none</span>;
}</code></pre>
    </div>
    
    <h2>预设样式示例</h2>
    <div class="presets">
        <div class="preset-card" id="preset1">
            <h3>优雅衬线</h3>
            <div class="preset-content preset-1">
                <p>这是一个优雅的衬线字体示例，具有精致的字母间距和斜体风格。</p>
            </div>
        </div>
        
        <div class="preset-card" id="preset2">
            <h3>等宽强调</h3>
            <div class="preset-content preset-2">
                <p>等宽字体与背景色的结合，创造出强烈的视觉冲击效果。</p>
            </div>
        </div>
        
        <div class="preset-card" id="preset3">
            <h3>大写标题</h3>
            <div class="preset-content preset-3">
                <p>大写字母与字母间距的结合，适合用于标题和强调文本。</p>
            </div>
        </div>
        
        <div class="preset-card" id="preset4">
            <h3>高行高文本</h3>
            <div class="preset-content preset-4">
                <p>增加行高可以大大提高长文本的可读性，特别是在大段内容中。</p>
            </div>
        </div>
    </div>
    
    <footer>
        <p>[羽神同行]CSS陪跑训练营 &copy; EOVA.CN</p>
    </footer>

    <script>
        // 获取所有控制元素
        const fontFamily = document.getElementById('fontFamily');
        const fontSize = document.getElementById('fontSize');
        const fontWeight = document.getElementById('fontWeight');
        const fontStyle = document.getElementById('fontStyle');
        const lineHeight = document.getElementById('lineHeight');
        const letterSpacing = document.getElementById('letterSpacing');
        const wordSpacing = document.getElementById('wordSpacing');
        const color = document.getElementById('color');
        const textAlign = document.getElementById('textAlign');
        const textTransform = document.getElementById('textTransform');
        const textDecoration = document.getElementById('textDecoration');
        
        // 获取所有显示值的元素
        const fontSizeValue = document.getElementById('fontSize-value');
        const fontWeightValue = document.getElementById('fontWeight-value');
        const lineHeightValue = document.getElementById('lineHeight-value');
        const letterSpacingValue = document.getElementById('letterSpacing-value');
        const wordSpacingValue = document.getElementById('wordSpacing-value');
        const colorValue = document.getElementById('color-value');
        
        // 获取代码显示元素
        const codeFontFamily = document.getElementById('code-fontFamily');
        const codeFontSize = document.getElementById('code-fontSize');
        const codeFontWeight = document.getElementById('code-fontWeight');
        const codeFontStyle = document.getElementById('code-fontStyle');
        const codeLineHeight = document.getElementById('code-lineHeight');
        const codeLetterSpacing = document.getElementById('code-letterSpacing');
        const codeWordSpacing = document.getElementById('code-wordSpacing');
        const codeColor = document.getElementById('code-color');
        const codeTextAlign = document.getElementById('code-textAlign');
        const codeTextTransform = document.getElementById('code-textTransform');
        const codeTextDecoration = document.getElementById('code-textDecoration');
        
        // 获取文本示例元素
        const textExample = document.getElementById('textExample');
        
        // 更新文本样式的函数
        function updateTextStyle() {
            // 更新字体属性
            textExample.style.fontFamily = fontFamily.value;
            textExample.style.fontSize = `${fontSize.value}px`;
            textExample.style.fontWeight = fontWeight.value;
            textExample.style.fontStyle = fontStyle.checked ? 'italic' : 'normal';
            
            // 更新间距属性
            textExample.style.lineHeight = lineHeight.value;
            textExample.style.letterSpacing = `${letterSpacing.value}px`;
            textExample.style.wordSpacing = `${wordSpacing.value}px`;
            
            // 更新颜色与装饰
            textExample.style.color = color.value;
            textExample.style.textAlign = textAlign.value;
            textExample.style.textTransform = textTransform.value;
            textExample.style.textDecoration = textDecoration.value;
            
            // 更新显示的值
            fontSizeValue.textContent = `${fontSize.value}px`;
            fontWeightValue.textContent = fontWeight.value;
            lineHeightValue.textContent = lineHeight.value;
            letterSpacingValue.textContent = `${letterSpacing.value}px`;
            wordSpacingValue.textContent = `${wordSpacing.value}px`;
            colorValue.textContent = color.value;
            
            // 更新代码显示
            codeFontFamily.textContent = fontFamily.value;
            codeFontSize.textContent = `${fontSize.value}px`;
            codeFontWeight.textContent = fontWeight.value;
            codeFontStyle.textContent = fontStyle.checked ? 'italic' : 'normal';
            codeLineHeight.textContent = lineHeight.value;
            codeLetterSpacing.textContent = `${letterSpacing.value}px`;
            codeWordSpacing.textContent = `${wordSpacing.value}px`;
            codeColor.textContent = color.value;
            codeTextAlign.textContent = textAlign.value;
            codeTextTransform.textContent = textTransform.value;
            codeTextDecoration.textContent = textDecoration.value;
        }
        
        // 添加事件监听器
        fontFamily.addEventListener('change', updateTextStyle);
        fontSize.addEventListener('input', updateTextStyle);
        fontWeight.addEventListener('input', updateTextStyle);
        fontStyle.addEventListener('change', updateTextStyle);
        lineHeight.addEventListener('input', updateTextStyle);
        letterSpacing.addEventListener('input', updateTextStyle);
        wordSpacing.addEventListener('input', updateTextStyle);
        color.addEventListener('input', updateTextStyle);
        textAlign.addEventListener('change', updateTextStyle);
        textTransform.addEventListener('change', updateTextStyle);
        textDecoration.addEventListener('change', updateTextStyle);
        
        // 预设样式
        document.getElementById('preset1').addEventListener('click', function() {
            fontFamily.value = "'Georgia', serif";
            fontSize.value = 20;
            fontWeight.value = 400;
            fontStyle.checked = true;
            lineHeight.value = 1.8;
            letterSpacing.value = 1;
            wordSpacing.value = 2;
            color.value = '#5a189a';
            textAlign.value = 'left';
            textTransform.value = 'none';
            textDecoration.value = 'none';
            updateTextStyle();
        });
        
        document.getElementById('preset2').addEventListener('click', function() {
            fontFamily.value = "'Courier New', monospace";
            fontSize.value = 18;
            fontWeight.value = 700;
            fontStyle.checked = false;
            lineHeight.value = 1.4;
            letterSpacing.value = 0;
            wordSpacing.value = 0;
            color.value = '#ffffff';
            textAlign.value = 'center';
            textTransform.value = 'none';
            textDecoration.value = 'none';
            textExample.style.backgroundColor = '#ff9e00';
            updateTextStyle();
        });
        
        document.getElementById('preset3').addEventListener('click', function() {
            fontFamily.value = "'Arial', sans-serif";
            fontSize.value = 22;
            fontWeight.value = 700;
            fontStyle.checked = false;
            lineHeight.value = 1.3;
            letterSpacing.value = 2;
            wordSpacing.value = 5;
            color.value = '#212529';
            textAlign.value = 'center';
            textTransform.value = 'uppercase';
            textDecoration.value = 'none';
            textExample.style.backgroundColor = '';
            updateTextStyle();
        });
        
        document.getElementById('preset4').addEventListener('click', function() {
            fontFamily.value = "'Trebuchet MS', sans-serif";
            fontSize.value = 16;
            fontWeight.value = 400;
            fontStyle.checked = false;
            lineHeight.value = 2;
            letterSpacing.value = 0;
            wordSpacing.value = 0;
            color.value = '#e63946';
            textAlign.value = 'justify';
            textTransform.value = 'none';
            textDecoration.value = 'none';
            textExample.style.backgroundColor = '';
            updateTextStyle();
        });
        
        // 初始化
        updateTextStyle();
    </script>
</body>
</html>